<template>
  <RouterLink :to="`/detail/${goods.id}`" class="itemLink">
    <div class="img">
      <img v-img-lazy="goods.picture" alt="" />
    </div>
    <p class="title">{{ goods.name }}</p>
    <p class="desc">{{ goods.desc }}</p>
    <p class="price">￥ {{ goods.price }}</p>
  </RouterLink>
</template>

<script setup name="GoodsItem">
defineProps({
  goods: {
    type: Object,
    default: () => {},
  },
})
</script>

<style scoped lang="scss">
.itemLink {
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;

  .img {
    width: 100%;
    height: 60%;
    img {
      width: 100%;
      height: 100%;
    }
  }
  p {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    text-align: center;
    &.title {
      font-size: 120%;
      font-weight: bold;
      padding: 3% 0;
    }
    &.desc{
      font-size: 80%;
      padding: 1% 0;
    }
    &.price {
      font-size: 130%;
      color: #f00;
    }
  }
}
</style>
